import React, {Fragment} from "react";
import {Container, Icon, Input, More} from "./style";
/**
 * 属性：
 *
 * type:{
 *     "account":图标是账号
 *     "password":图标是密码 + 输入的字符被隐藏
 *     ...
 * }
 *
 * clearable:输入框最后带一个可点击的清空按钮（默认 false ）
 *
 * size:{
 *     "normal":正常尺寸 （默认）
 *     "small":小尺寸
 *     "large":大尺寸
 * }
 *
 * placeholder:输入框提示内容
 *
 * style:样式 -> 附加在最外层的Container中
 *
 * onChange:Event CallBack
 *
 * value: 绑定值
 *
 */
/* 封装样式 */
const Jinput = (props) => {
    /* 解构赋值 */
    let {
        placeholder = "",
        size = 'normal',
        type = 'isUsual',
        clearable = false,
        value,
        onChange,
        style
    } = props

    let HeadStyle = {
        textAlign: 'center',
        display: 'block',
        userSelect: 'none',
        color: '#999',
        width: '100%',
        height: '100%',
        fontSize: size === 'small' ? '18px' : size === 'normal' ? '25px' : size === 'large' ? '30px' : '20px'
    }
    let EndStyle = {
        textAlign: 'center',
        display: 'block',
        userSelect: 'none',
        cursor: 'pointer',
        color: '#999',
        width: '100%',
        height: '100%',
        lineHeight: size === 'small' ? '28px' : size === 'normal' ? '38px' : size === 'large' ? '48px' : '28px',
        fontSize: size === 'small' ? '18px' : size === 'normal' ? '20px' : size === 'large' ? '20px' : '20px'
    }

    let EndIcon = clearable ? 'icon-qingkong' : '', icon;

    /* icon赋值 */
    switch (type) {
        case 'account':
            icon = 'icon-zhanghao'
            break;
        case 'password':
            icon = 'icon-mima';
            break;
        case 'mobile':
            icon = 'icon-shouji';
            break;
        case 'mail':
            icon = 'icon-youxiang';
            break;
        case 'sure-password':
            icon = 'icon-surepassword';
            break;
        default:
            break;
    }

    /* 点击 “X” 图标后清空输入框内容 */
    function clearInput() {
        onChange('')
    }

    function Change(e) {
        onChange(e)
    }

    return (
        <Fragment>
            <Container className={size} style={style}>
                <Icon className={`${type}`}>
                    <span className={`iconfont ${size} ${icon}`} style={HeadStyle}/>
                </Icon>
                <>
                    <Input placeholder={placeholder ? placeholder : ''}
                           className={`${size} ${type} ${EndIcon ? 'EndIcon' : ''}`}
                           type={type === 'password' || type === 'sure-password' ? 'password' : type ? type : ''}
                           value={value}
                           onChange={(e) => Change(e.target.value)}
                    />
                </>
                <More className={`${size} ${EndIcon ? 'EndIcon' : ''}`} onClick={clearInput}>
                    <span className={`iconfont ${size} ${EndIcon}`} style={EndStyle}/>
                </More>
            </Container>
        </Fragment>
    )
}
export default Jinput;
